import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, DatePicker, Select, TreeSelect, } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;
import AddResourceGroupModal from '../../components/resource/AddResourceGroupModal';
import SecondResourceGroupModal from '../../components/resource/SecondResourceGroupModal';
import ShowResourceGroupViewModal from '../../components/resource/ShowResourceGroupViewModal'
function ResourceGroup({ dispatch, resourceGroup, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, modalType,detailList } = resourceGroup

    const columns = [
        {
            title: '资源组名称',
            dataIndex: 'groupName',
            key: 'groupName',
            width: 120,
        }, {
            title: 'IP地址',
            dataIndex: 'ip',
            key: 'ip',
            width: 120,
        },
        {
            title: '安全网关',
            dataIndex: 'manageIp',
            key: 'manageIp',
            width: 100,
        },
        {
            title: '网络名称',
            dataIndex: 'networkName',
            key: 'networkName',
            width: 120,
        }, {
            title: 'ip网段',
            dataIndex: 'ipSegment',
            key: 'ipSegment',
            width: 100,
        }, 
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 120,
        },
         {
            title: '操作',
            key: 'operation',
            width: 60,
            render: (text, record) => (
                <span>
                    <a onClick={editHandler.bind(null, record.id_)}>编辑</a>
                    <span className="ant-divider" />
                    <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                        <a>删除</a>
                    </Popconfirm>
                    <span className="ant-divider" />
                    <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
                </span>
            ),
        }];

    const pagination = {
        current: resourceGroup.current,
        pageSize: resourceGroup.currentSize,
        total: resourceGroup.total,
        showSizeChanger: true,
        showTotal: (total => '共' + resourceGroup.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'resourceGroup/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size } },
            });
        },
        onChange(current) {
            dispatch({
                type: 'resourceGroup/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': resourceGroup.currentSize } },
            });
        },
    };

    //删除事件
    function deleteHandler(id) {
        dispatch({
            type: 'resourceGroup/remove',
            payload: { id: id, search: { ...getFieldsValue(), ...{ 'pageNum': resourceGroup.current, 'pageSize': resourceGroup.currentSize } }, },
        });
    }

    //查看对象
    const editHandler = (id, values) => {
        dispatch({
            type: 'resourceGroup/qryById',
            payload: id,
        });
    }
    //查询事件
    const submitHandle = () => {
        dispatch({
            type: 'resourceGroup/queryList',
            payload: { ...getFieldsValue() },
        });
    }
    //清空查询条件
    function handleClear() {
        form.resetFields();
    }

    //点击新增按钮
    const addHandler = () => {
        dispatch({
            type: 'resourceGroup/addModal',
            payload: {
                modalType: 'create',
            },
        })
    }

    const onViewItem = (id) => {  
        dispatch({
            type: 'resourceGroup/onViewItem',
            payload:id,
        })
    }
    const modalProps = {
        item: resourceGroup.currentItem,
        visible: modalVisible,
        type: modalType,
        maskClosable: false,
        dispatch: dispatch,
        detailList:detailList,
        ipParamIdList:resourceGroup.ipParamIdList,
        confirmLoading: loading,
        title: '新增资源组',
        wrapClassName: 'vertical-center-modal',
        newKey: resourceGroup.newKey,
        onOk(data) {
            console.log(data);
            dispatch({
                type: `resourceGroup/${modalType}`,
                payload: { data: data, search: { ...getFieldsValue(), ...{ 'pageNum': resourceGroup.current, 'pageSize': resourceGroup.currentSize } } },
            })
        },
        onCancel() {
            dispatch({
                type: 'resourceGroup/hideAddModal',
            })
        },
    }

    const secondModalProps = {
        item: resourceGroup.assetItem,
        visible: resourceGroup.secondModalVisible,
        assetList:resourceGroup.assetList,
        userList:resourceGroup.userList,
        assetType:resourceGroup.assetTypeTree,
        detailList:detailList,
        type: modalType,
        roomList:resourceGroup.roomList,        
        assetBrandList:resourceGroup.assetBrandList,
        rackList:resourceGroup.rackList,
        assetCurrent:resourceGroup.assetCurrent,
        assetCurrentSize:resourceGroup.assetCurrentSize,
        assetTotal:resourceGroup.assetTotal,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增明细',       
        wrapClassName: 'vertical-center-modal',
        newKey : resourceGroup.newKey,  
        onCancel () {
            dispatch({
                type: 'resourceGroup/hideSecondModal',
            })
        },
    }

    const viewModalProps = {
        item: resourceGroup.viewItem,
        visible: resourceGroup.viewModalVisible,
        maskClosable: false,
        dispatch: dispatch,
        viewList:resourceGroup.viewList,
        ipParamIdList:resourceGroup.ipParamIdList,
        confirmLoading: loading,
        title: '查看资源组',
        wrapClassName: 'vertical-center-modal',
        newKey: resourceGroup.newKey,
        onCancel() {
            dispatch({
                type: 'resourceGroup/hideViewModal',
            })
        },
    }
    return (
        <div style={{ backgroundColor: '#fff' }}>
            <div style={{ minHeight: '100%' }}>
                <div style={{ width: '100%', backgroundColor: '#fff', lineHeight: '40px', paddingLeft: '20px', paddingTop: '10px' }}>
                    <Form layout="inline" >
                        <FormItem>
                            {getFieldDecorator('groupName')(
                                <Input type="text" placeholder="资源组名称" style={{ width: '200px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('ip')(
                                <Input type="text" placeholder="ip地址" style={{ width: '200px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('manageIp')(
                                <Input type="text" placeholder="安全网关" style={{ width: '200px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                        </FormItem>
                        <FormItem>
                            <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                        </FormItem>

                        <div style={{ marginTop: '-40px', textAlign: 'right', paddingRight: '10px' }}>
                            <FormItem>
                                <Button type="primary" size='large' onClick={addHandler}>新增资源组</Button>
                            </FormItem>
                        </div>

                    </Form>
                </div>
                <div style={{ width: '100%', height: '100%', paddingLeft: '20px', paddingTop: '30px', paddingRight: '20px' }}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={resourceGroup.list} pagination={pagination}
                    />
                </div>
            </div>
            <AddResourceGroupModal {...modalProps} />
            <SecondResourceGroupModal {...secondModalProps} />
            <ShowResourceGroupViewModal {...viewModalProps}/>
        </div>
    );
}

function mapStateToProps(state) {
    return { resourceGroup: state.resourceGroup, loading: state.loading.models.resourceGroup };
}

ResourceGroup = Form.create()(ResourceGroup);

export default connect(mapStateToProps)(ResourceGroup);